<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询操作</title>
    <script>
        function f1(){
            // 根据id属性查询对应节点
            // 由于在一个HTML文档中,id属性值是不能重复的
            // 查询返回的是一个节点信息
            let btn = document.getElementById("btn");
            console.log(btn);
            let a1 = document.getElementById("a1");
            console.log(a1);
        }

        function f2(){
            // 根据name属性查找对应节点
            // 由于name属性值是可以重复的,因此此时返回的是一个节点集合
            let btns = document.getElementsByName("btn");
            console.log(btns);
        }

        function f3(){
            // 根据标签名查找对应节点
            // 由于在一个HTML文档中,标签名可以重复
            // 因此,此时返回的也是节点集合
            let as = document.getElementsByTagName("a");
            console.log(as);
        }

        function f4(){
            // 根据CSS选择器查找指定节点
            // querySelector():返回匹配到的第一个节点
            let btn = document.querySelector("#btn")
            // let btn = document.querySelector("button")
            // querySelectorAll():返回匹配到的所有节点
            let btns = document.querySelectorAll("button");
            console.log(btn);
            console.log(btns);

            let btns2 = document.querySelectorAll("button[name='btn']");
            console.log(btns2);
        }
    </script>
</head>
<body>
<button id="btn" name="btn" onclick="f1()">根据id属性查询对应节点</button><br>
<a href="javascript:;" id="a1">超链接</a><br>
<hr>
<input name="btn" type="button" value="根据name属性查找对应节点" onclick="f2()">
<hr>
<a href="javascript:;" onclick="f3()">根据标签名查找对应节点</a>
<hr>
<button onclick="f4()">根据CSS选择器查找指定节点</button>
</body>
</html>